<template>
  <el-dialog
    :title="title"
    :fullscreen="dialogFull"
    :close-on-click-modal="false"
    :visible.sync="showDialog"
    :modal-append-to-body="false"
    :append-to-body="true"
    :before-close="handleClose"
  >
    <template slot="title">
      <div class="avue-crud__dialog__header">
        <span class="el-dialog__title">服务授权</span>
        <div
          class="avue-crud__dialog__menu"
          @click="dialogFull ? (dialogFull = false) : (dialogFull = true)"
        >
          <i class="el-icon-full-screen"></i>
        </div>
      </div>
    </template>
    <div class="display-flex pb10 pl5">
      已选：
      <span class="color-66b1">{{ slectedData.resName }}</span>
    </div>

    <el-tree
      :data="menuList"
      node-key="id"
      ref="menuListTree"
      highlight-current
      @node-click="clickNode"
      :default-expand-all="false"
      :expand-on-click-node="false"
      :props="menuTreeProps"
    >
    </el-tree>
    <div slot="footer" class="dialog-footer">
      <el-button @click="handleClose">取 消</el-button>
      <el-button type="primary" @click="ok">确 认</el-button>
    </div>
  </el-dialog>
</template>
<script>
import ucResourcesService from "@/service/publics/UcResourceService";

export default {
  props: {
    callback: { type: Function, default: function () {} },
  },
  data() {
    return {
      showDialog: false,
      slectedData: "",
      menuTreeProps: {
        label: "resName",
        children: "children",
      },
      menuList: [],
      title: "资源分配",
      dialogFull: false,
    };
  },
  methods: {
    init() {
      this.showDialog = true;
      /* const self = this;*/
      ucResourcesService.queryAuthResourceMenu().then(({ data }) => {
        this.menuList = data;
      });
      // ucResourcesService.queryList().then(({data}) => {
      // 	this.menuList = this.treeDataTranslate(data, 'id')
      // })
    },
    clickNode(data, node, obj) {
      var array = this.getParent(this.menuList, data.id);
      var treeIndex = "";
      if (array && array instanceof Array) {
        for (var i in array) {
          treeIndex += array[i].resName + "/";
        }
      }
      data.treeIndex = treeIndex;
      this.slectedData = data;
    },

    ok() {
      if (this.slectedData && this.slectedData.id) {
        // 回调传值
        this.callback(this.slectedData);
      }
      this.handleClose();
    },

    /**
     * 关闭-弹框
     */
    handleClose() {
      this.slectedData = {};
      this.showDialog = false;
    },
    getParent(array, nodeId) {
      var arrRes = [];
      if (array.length == 0) {
        if (nodeId) {
          arrRes.unshift(array);
        }
        return arrRes;
      }
      let rev = (data, nodeId) => {
        for (var i = 0, length = data.length; i < length; i++) {
          let node = data[i];
          if (node.id == nodeId) {
            arrRes.unshift(node);
            rev(array, node.parentId);
            break;
          } else {
            if (node.children) {
              rev(node.children, nodeId);
            }
          }
        }
        return arrRes;
      };
      arrRes = rev(array, nodeId);
      return arrRes;
    },
  },
};
</script>
<style scoped>
.color-66b1 {
  color: #66b1ff;
}
.div-tag {
  width: 70px;
  padding: 5px;
  display: inline-block;
}

/*  dialog*/
.el-dialog__header {
  padding: 15px 20px 15px;
}

/*dialog header*/
.el-dialog__header {
  background: #e3eaed;
}
.avue-crud__dialog__header {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
.el-dialog__title {
  color: rgba(0, 0, 0, 0.85);
  font-weight: 500;
  word-wrap: break-word;
}
.avue-crud__dialog__menu {
  padding-right: 20px;
}
.avue-crud__dialog__menu i {
  color: #909399;
  font-size: 15px;
}
.el-icon-full-screen {
  cursor: pointer;
}
.el-icon-full-screen:before {
  content: "\e719";
}
::v-deep .el-dialog__headerbtn {
  margin-top: 3px;
}
</style>
